<template>
	<div>
		<!--头部-->
		<div class="header header_bg" v-cloak>
			<p class="header_left ellipsis01" style="width: 100px;">{{city}}
				<!--<small class="iconfont">&#xe62a;</small>-->
			</p>
			<!--点击进入搜索页面-->
			<router-link to="/search">
				<form action="" class="">
					<span class="iconfont sou">&#xe6a4;</span>
					<input type="search" class="search" name="search" value="" />
				</form>
			</router-link>
			<!--点击进入消息页面-->
			<router-link :to="{name:'message'}" class="baiColor">
				<span class="iconfont right baiColor">&#xe616;<small v-if="news" class="small" v-text="length"></small></span>
			</router-link>
		</div>
		<!--首页轮播-->
		<div class="banner">
			<!--轮播图-->
			<swiper :options="swiperOption"  ref="mySwiper" class="banner">  
		        <swiper-slide v-for="(banner,index) in banners" :key="index">
		        	<router-link :to="banner.banner_url">
		        	<img :src="imgURL+banner.banner_img"/>
		        	</router-link>
		        </swiper-slide>
		        <div class="swiper-pagination" slot="pagination"></div>  
		  </swiper>
		</div>
		<!--<div class="inform clearfix" v-if="inform == '' ? false : true">
			<h3 class="iconfont pull-left">&#xe628;</h3>
			<p class="pull-left ellipsis01" v-text="inform"></p>
		</div>-->
		<div class="center">
			<!--视频轮播-->
			<div class="audio">
				<h2><span></span> 精选视频 </h2>
				<div class="kuang">
					<swiper :options="swiperOption"  ref="mySwiper" class="banner"  style="height: 150px;">
				        <swiper-slide v-for="(video,index) in videos" :key="index" class="video_item" v-if="video.screen_img == '' ? false : true">
				        	<video width="320" height="155" :poster="imgURL+video.screen_img" preload="auto" controls="controls">
				        		<source :src="imgURL+video.screen_url" type="video/mp4">
				        			您的浏览器不支持播放该视频
				        	</video>
				        	<!--<img :src="video.screen_img"/>-->
				        </swiper-slide>
				        
				        <div class="swiper-pagination" slot="pagination"></div>  
				  </swiper>
				</div>
			</div>
			<!--新闻资讯-->
			<h2> <span></span>新闻资讯</h2>
			<div class="content">
				<section v-for="(article ,index) in articles" :key="index">
					<div class="container">
						<!--文章的图片动态路径-->
						<img :src="imgURL+article.new_img" />
						<div class="rightW">
							<!--根据文章id改动态路径-->
							<router-link :to="'/xiangqing/'+article.new_id" class="tit">
								<h4 class="ellipsis01" v-text="article.new_title"></h4>
								<p class="jie ellipsis03 index-jie" style="height:37px;" v-html="article.new_content"></p>
							</router-link>
							<div class="info">
								<span class="zans" :data-index=index :class="{'active':article.check}">
									<i @click="zan(article,index)" class="iconfont" >&#xe607;</i>
										 {{article.new_num}}
								</span>
								<router-link :to="'/pinglun/'+article.new_id" class="pings">
									<span>
										<i class="iconfont">&#xe644;</i>
										 	{{article.evaluate_num}}
									</span>
								</router-link>
							</div>
						</div>
					</div>
				</section>
			</div>
			<!--点击播放具体那个视频(动态的，获取此视频的id)-->
			<!--<div class="shipingDetails" v-show="details">
				<div class="kuanggrey" @click="noshow">-->
					<!--<video width="100wh" class="video2" height="100%" autoplay muted loop>
						<source src="../../static/audio1.mp4" type="video/mp4"></source>
					</video>-->
				<!--</div>
			</div>-->
		</div>
		
		<tab></tab>
	</div>

</template>

<script>
	import tab from './table.vue';
	import swipers from '../css/swiper-3.4.2.min.css';
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
	export default {
		components: {
			swiper,
			swiperSlide,
			tab
		},
		data() {
			return {
				imgURL:this.imgURL,
				news:false,
				inform:"",//通知
				length:"",//消息数量
				isActive: false,
				details: false,
				isActive: false,
				city: '',
				num: '',
				videos:[],//轮播视频
				banners:[],	//banner
				articles: [], //新闻列表
				//轮播部分
				swiperOption: {
					notNextTick: true, 
	                pagination: '.swiper-pagination',  
	                slidesPerView: 'auto',  
	                centeredSlides: true,  
	                paginationClickable: true,
	                spaceBetween: 30,
	                
					onSlideChangeEnd: swiper => {  //回调方法  
	                    this.page = swiper.realIndex+1;  
	                    this.index = swiper.realIndex;  
	               	}
				},
			}
		},
		created() {
			//获取当前位置=>在index.html引入外部链接
			this.city = remote_ip_info.city;
		},
		
		mounted: function() {
				let _this = this;
				//          获取消息的个数
		          var params = new URLSearchParams();
		          var info = window.localStorage.data;
		          params.append("token", info); //客户秘钥（信息）
//		          console.log(info)
//		          params.append("type", 0);
		          this.$axios({
		            url: "Home/Index/msg",
		            method: "POST",
		            data: params
		          }).then(res => {
		            if(res.data.code == 1){
		            	this.news = true;
		            this.length = res.data.data
		          }else if(res.data.code == 2){
		          	this.news = false;
		          }
		        }).catch(function(err) {
		            console.log(err);
		          });
				//新闻列表
				var info = window.localStorage.data;
				var params = new URLSearchParams();
				params.append('token', info);	//客户秘钥（信息）
				if(info == undefined){
					_this.$router.push("wlogin")
				}else{
				this.$axios({
					url: "Home/New/index",
					method: "POST",
					data:params
				}).then((res) => {
					if(res.data.code == 1) {
						this.articles = res.data.data;
						var datas = this.articles;
						datas.forEach(function(eachs) {
							//要判断是否点过赞了，
							if(eachs.iszan != 0) {
								if(typeof eachs.check == "undefined") {
									_this.$set(eachs, 'check', true)
								}
							}
						});
					}
				}).catch(function(err) {
					console.log(err)
				})
			
				//首页的轮播图
				this.$axios({
					url: "Home/Index/banner",
					method: "POST",
					data: params
				}).then((res) => {
					if(res.data.code == 1) {
						var datas = res.data.data;
						this.banners = datas.data;	//图片
						this.inform = datas.notice[0].content;
					}
				}).catch(function(err) {
					console.log(err)
				})

				//首页的轮播视频
				this.$axios({
					url: "Home/Index/screen",
					method: "POST",
					data: params
				}).then((res) => {
					//视频获取成功
					if(res.data.code == 1) {
						this.videos = res.data.data;
					}
				}).catch(function(err) {
					console.log(err)
				})
			
			}
		},
		methods: {
			//列表点赞/取消
			zan: function(article, index) {
				var _this = this;
				var info = window.localStorage.data;
				var params = new URLSearchParams();
				if(typeof _this.articles[index].check == "undefined" || _this.articles[index].check == false) {
					//点赞
					let id = _this.articles[index].new_id;
					_this.articles[index].new_num++;
					params.append('type', 1);
					params.append('id', id);
					params.append('token', info);	//客户秘钥（信息）
					this.$axios({
						url: "Home/New/new_zan",
						method: "POST",
						data: params
					}).then((res) => {
						_this.$set(article, 'check', true);
					}).catch(function(err) {
						console.log(err)
					});
					//点赞结束	
				} else if(_this.articles[index].check == true) {
					//取消赞
					let id = _this.articles[index].new_id;
					_this.articles[index].new_num--;
					params.append('type', 1);
					params.append('id', id);
					params.append('token', info);	//客户秘钥（信息）
					this.$axios({
						url: "Home/New/del_zan",
						method: "POST",
						data: params
					}).then((res) => {
						_this.articles[index].check = false;
						//需要变色
					}).catch(function(err) {
						console.log(err)
					});
				}
			},

			show: function() {
				//显示具体的视频播放
				this.details = true;
			},
			noshow: function() {
				//具体的视频播放结束
				this.details = false;
			},

		},
	}
</script>
<style type="text/css">
	.index-jie p{
		font-size: 12px !important;
	}
</style>
<style scoped="scoped">
	/*@import "../css/swiper-3.4.2.min.css";*/
	@import "../css/public.css";
	@import "../css/iIndex.css";
	
.header {
	z-index: 100;
}

.active {
	color: #FFBA01 !important;
}
/*消息数量*/
.small{
  font-size: 10px;
  display: inline-block;
  width: 14px;
  height: 14px;
  text-align: center;
  border-radius: 50%;
  color:#fff;
  background: #FF0000;
  position: absolute;
  top:-5px;
  right: -10px;
}
/*通知部分*/
	.inform{
		width: 95%;
		margin: auto;
		height: 50px;
		line-height: 50px;
		color:#FF0000;
	}
	.inform h3{
		font-size: 26px;
		margin-right: 10px;
	}
	.inform p{
		width: 85%;
		font-size: 16px;
	}
	/*轮播部分*/
	.banner{
		width: 100%;
		height: 180px;
		margin-top: 40px;
	}
.banner img{
	width: 100%;
	height:180px;
}
		/*span点初始颜色*/
.swiper-pagination-bullet{
	background: #fff;
	opacity: 1;
}
		/*选中颜色*/
.swiper-pagination-bullet-active{
	background: #259C3F;
}
.video_item{
	height: 180px;
	width: 100%;
	position: relative;
}
.video_item video,
.video_item img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/*.video_item video{
	z-index: 10;
	opacity: 1;
}
.video_item img{
	z-index: 5;
}*/
	
/*动态获取视频部分*/
.shipingDetails {
	height: 100px;
}

.shipingDetails .kuanggrey {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .5);
}

.shipingDetails .kuanggrey .video2 {
	width: 100%;
	height: 200px;
	margin-top: 60%;
}
.kuang .video1 {
	height: 150px;
	width: 100%;
	border-radius: 10px;
}

.bannerv .videos {
	height: 150px;
	border-radius: 10px;
}
</style>